@extends('admin.pub.pub')
@section('title','管理员列表')
@section('bread1','管理员管理')
@section('bread2','管理员列表')
@section('content')
    <div class="page-container">
        <div class="text-c">
            <button onclick="removeIframe()" class="btn btn-primary radius">关闭选项卡</button>
            日期范围：
            <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })" id="logmin"
                   class="input-text Wdate" value="{{ $logmin }}" style="width:120px;">
            -
            <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })"
                   id="logmax" class="input-text Wdate" value="{{ $logmax }}" style="width:120px;">
            <input type="text" name="kw" id="kw" placeholder="管理员名称" style="width:250px" class="input-text">
            <button id="searchArt" class="btn btn-success"><i class="Hui-iconfont">&#xe665;</i> 搜索管理员
            </button>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20">
			<span class="l">
				<a class="btn btn-primary radius" data-title="添加管理员" data-href="{{ route('admin.user.signUp') }}"
                   onclick="Hui_admin_tab(this)" href="javascript:;">
					<i class="Hui-iconfont">&#xe600;</i> 添加管理员
				</a>
			</span>
        </div>
        <div class="mt-20">
            <table id="table"
                   class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
                <thead>
                <tr class="text-c">
                    <th width="80">ID</th>
                    <th>用户名</th>
                    <th width="200">Email</th>
                    <th>手机号</th>
                    <th>最后一次登录IP</th>
                    <th>状态</th>
                    <th width="120">操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('js')
    <!--请在下方写此页面业务相关的脚本-->
    <script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="/admin/lib/laypage/1.2/laypage.js"></script>
    <script type="text/javascript">
		var datatable = $('.table-sort').DataTable({
			// 开启服务器模式
			serverSide: true,
			// 本地查询
			searching: false,
			// 排序
			"order": [[0, "asc"]],
			// 不排序
			columnDefs: [
				{targets: [4, 5, 6], orderable: false}
			],
			// ajax发起请求
			ajax: {
				// 请求地址
				url: '{{ route("admin.user.userlistApi") }}',
				// 请求方式 get/post
				type: 'GET',
				// 请求的参数
				// 两者写法效果一致  但是它用于搜索
				data: d => {
					d.logmin = $('#logmin').val()
					d.logmax = $('#logmax').val()
					d.kw = $.trim($('#kw').val())
				}
			},
			// columns要对tr中的td单元格中的内容进行数据填充
			// 注意：如果data接收类似a或b的信息，实际服务器没有返回该信息，那么一定要同时设置defaultContent属性，否则报错
			columns: [
				// 总的数量与表格的列的数量一致，不多也不少
				// 字段名称与sql查询出来的字段时要保持一致，就是服务器返回数据对应的字段名称
				// defaultContent 和 className 可选参数
				{'data': 'id'},
				{'data': 'username'},
				{'data': 'email'},
				{'data': 'phone'},
				{'data': 'ip'},
				{
					'data': 'status',
					render: function (data, type, row, meta) {
						if (row.deleted_at == null) {
							return '<div style="text-align:center;"><span class="label label-success radius">激活</span></div>';
						}
						return '<div style="text-align:center;"><span class="label label-danger radius">冻结</span></div>';
					}
				},
				{
					'data': 'toolbar', render: function (data, type, row, meta) {
						let str = `<a onclick="article_one('${row.username}','/admin/user/${row.id}')" class="btn btn-primary-outline radius size-MINI" href="javascript:;">查看</a> `
						str += `<a onclick="article_edit('${row.username}','/admin/user/edit/${row.id}')" class="btn btn-default-outline radius size-MINI" href="javascript:;">编辑</a>`;
						str += `<a onclick="article_del(this,${row.id})" class="btn btn-danger-outline radius size-MINI" href="javascript:;">删除</a>`;
						return str;
					}
				}
			],
			createdRow: function (row, data, dataIndex) {

			}
		});

		var _token = "{{ csrf_token() }}"

		// 搜索
		$('#searchArt').click(function () {
			datatable.ajax.reload();
		})

		// 批量删除
		function datadel() {
			let ids = $('.ids:checked')
			let idArr = []
			for (let i = 0; i < ids.length; i++) {
				idArr.push(ids[i].value)
			}
			$.ajax({
				url: '{{ route('admin.article.deleteMore') }}',
				type: 'post',
				data: {_token, idArr},
				dataType: 'json',
				success(res) {
					if (res.status == 0) {
						datatable.ajax.reload();
						layer.msg('删除成功')
					} else {
						layer.msg('删除失败')
					}
				}
			})
		}

		/*资讯-添加*/
		function article_add(title, url, w, h) {
			var index = layer.open({
				type: 2,
				title: title,
				content: url
			});
			layer.full(index);
		}

		/*资讯-查看*/
		function article_one(title, url) {
			var index = layer.open({
				type: 2,
				title: title,
				content: url
			});
			layer.full(index);
		}

		/*资讯-编辑*/
		function article_edit(title, url, id, w, h) {
			var index = layer.open({
				type: 2,
				title: title,
				content: url
			});
			layer.full(index);
		}

		/*资讯-删除*/
		function article_del(obj, id) {
			layer.confirm('确认要删除吗？', function (index) {
				$.ajax({
					type: 'delete',
					url: '/admin/user/' + id,
					data: {_token},
					dataType: 'json',
					success: function (data) {
						let {status} = data;
						if (status == 0) {
							datatable.ajax.reload();
							layer.msg('已删除!', {icon: 1, time: 1000});
						} else {
							layer.msg('删除失败!', {icon: 1, time: 1000});
						}
					},
					error: function (data) {
						console.log(data.msg);
					},
				});
			});
		}

		/*资讯-审核*/
		function article_shenhe(obj, id) {
			layer.confirm('审核文章？', {
					btn: ['通过', '不通过', '取消'],
					shade: false,
					closeBtn: 0
				},
				function () {
					$(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="article_start(this,id)" href="javascript:;" title="申请上线">申请上线</a>');
					$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已发布</span>');
					$(obj).remove();
					layer.msg('已发布', {icon: 6, time: 1000});
				},
				function () {
					$(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="article_shenqing(this,id)" href="javascript:;" title="申请上线">申请上线</a>');
					$(obj).parents("tr").find(".td-status").html('<span class="label label-danger radius">未通过</span>');
					$(obj).remove();
					layer.msg('未通过', {icon: 5, time: 1000});
				});
		}

		/*资讯-下架*/
		function article_stop(obj, id) {
			layer.confirm('确认要下架吗？', function (index) {
				$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="article_start(this,id)" href="javascript:;" title="发布"><i class="Hui-iconfont">&#xe603;</i></a>');
				$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已下架</span>');
				$(obj).remove();
				layer.msg('已下架!', {icon: 5, time: 1000});
			});
		}

		/*资讯-发布*/
		function article_start(obj, id) {
			layer.confirm('确认要发布吗？', function (index) {
				$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="article_stop(this,id)" href="javascript:;" title="下架"><i class="Hui-iconfont">&#xe6de;</i></a>');
				$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已发布</span>');
				$(obj).remove();
				layer.msg('已发布!', {icon: 6, time: 1000});
			});
		}

		/*资讯-申请上线*/
		function article_shenqing(obj, id) {
			$(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">待审核</span>');
			$(obj).parents("tr").find(".td-manage").html("");
			layer.msg('已提交申请，耐心等待审核!', {icon: 1, time: 2000});
		}

    </script>
@endsection